import classNames from 'classnames';
import React, { ReactNode } from 'react';
import styles from './index.module.scss';

interface InputProps
  extends React.DetailedHTMLProps<
    React.InputHTMLAttributes<HTMLInputElement>,
    HTMLInputElement
  > {
  extra?: ReactNode;
  errorMsg?: string;
  className?: string;
}
export default function Input(props: InputProps) {
  const { extra, errorMsg, className, ...restProps } = props;
  return (
    <div className={classNames(styles.root, className)}>
      {/* 短信验证码输入框 */}
      <div className="input-box">
        <input className="input" {...restProps} />
        <div className="validate">{errorMsg}</div>
        {extra && <div className="extra">{extra}</div>}
      </div>
    </div>
  );
}
